<template>
	<view class="employee-card">
		<view class="card-header">
			<view class="header-left">
				<view class="employee-avatar">
					<u-avatar :text="employeeData.nameInitial" size="50" fontSize="22" bg-color="#4080FF"></u-avatar>
				</view>
				<view class="user-info">
					<view class="name-row">
						<text class="employee-name">{{ employeeData.name }}</text>
						<view class="status-badge" :class="employeeData.isactive === '1' ? 'status-active' : 'status-inactive'">
							<u-icon :name="employeeData.isactive === '1' ? 'checkmark-circle-fill' : 'close-circle-fill'" 
								:color="employeeData.isactive === '1' ? '#19be6b' : '#fa3534'" size="16"></u-icon>
							<text class="status-text">{{ employeeData.isactive === '1' ? '在职' : '离职' }}</text>
						</view>
						<view class="refresh-btn" @click="handleRefreshClick">
							<u-icon name="reload" color="#2979ff" size="18"></u-icon>
						</view>
					</view>
					<text class="employee-title">{{ employeeData.title }}</text>
				</view>
			</view>
		</view>
		
		<view class="card-body">
			<view class="info-grid">
				<view class="info-item">
					<view class="info-icon id-icon">
						<u-icon name="account-fill" color="#FFFFFF" size="22"></u-icon>
					</view>
					<view class="info-content">
						<text class="info-label">工号</text>
						<text class="info-value">{{ employeeData.id }}</text>
					</view>
				</view>
				
				<view class="info-item">
					<view class="info-icon dept-icon">
						<u-icon name="home-fill" color="#FFFFFF" size="22"></u-icon>
					</view>
					<view class="info-content">
						<text class="info-label">部门</text>
						<text class="info-value">{{ employeeData.department }}</text>
					</view>
				</view>
				
				<view class="info-item">
					<view class="info-icon phone-icon">
						<u-icon name="phone-fill" color="#FFFFFF" size="22"></u-icon>
					</view>
					<view class="info-content">
						<text class="info-label">电话</text>
						<text class="info-value">{{ employeeData.telephone || '未填写' }}</text>
					</view>
				</view>
				
				<view class="info-item">
					<view class="info-icon date-icon">
						<u-icon name="calendar-fill" color="#FFFFFF" size="22"></u-icon>
					</view>
					<view class="info-content">
						<text class="info-label">入职日期</text>
						<text class="info-value">{{ employeeData.startdate }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'EmployeeCard',
	props: {
		employeeData: {
			type: Object,
			default: () => {
				return {
					name: '未知',
					nameInitial: '未',
					title: '未知职位',
					id: '未知工号',
					department: '未知部门',
					isactive: '1',
					startdate: '未知',
					telephone: ''
				}
			}
		}
	},
	methods: {
		handleRefreshClick() {
			// 触发父组件的重新登录事件
			this.$emit('refresh-login');
		}
	}
}
</script>

<style lang="scss">
.employee-card {
	background-color: #ffffff;
	border-radius: 20rpx;
	margin: 0 10rpx 30rpx;
	box-shadow: 0 10px 25px rgba(64, 128, 255, 0.07);
	overflow: hidden;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx 28rpx;
}

.header-left {
	display: flex;
	align-items: center;
}

.employee-avatar {
	box-shadow: 0 4px 16px rgba(64, 128, 255, 0.15);
	border-radius: 50%;
}

.user-info {
	margin-left: 20rpx;
	flex: 1;
}

.name-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 6rpx;
	gap: 12rpx;
}

.employee-name {
	font-size: 34rpx;
	font-weight: 600;
	color: #303133;
	letter-spacing: 0.5px;
	font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
	flex-shrink: 0;
}

.status-badge {
	display: inline-flex;
	align-items: center;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
	gap: 4rpx;
}

.status-badge.status-active {
	background-color: rgba(25, 190, 107, 0.1);
}

.status-badge.status-inactive {
	background-color: rgba(250, 53, 52, 0.1);
}

.status-text {
	font-size: 20rpx;
	font-weight: 500;
	line-height: 1;
}

.status-active .status-text {
	color: #19be6b;
}

.status-inactive .status-text {
	color: #fa3534;
}

.employee-title {
	font-size: 24rpx;
	color: #8c9aab;
	display: block;
	font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

.card-body {
	padding: 20rpx 28rpx 36rpx;
}

.info-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32rpx 28rpx;
}

.info-item {
	display: flex;
	align-items: flex-start;
}

.info-icon {
	margin-right: 16rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 46rpx;
	height: 46rpx;
	border-radius: 50%;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.id-icon {
	background: linear-gradient(135deg, #4080FF, #0F60E6);
}

.dept-icon {
	background: linear-gradient(135deg, #722ED1, #531DAB);
}

.phone-icon {
	background: linear-gradient(135deg, #1890FF, #096DD9);
}

.date-icon {
	background: linear-gradient(135deg, #FA8C16, #D46B08);
}

.info-content {
	flex: 1;
}

.info-label {
	font-size: 24rpx;
	color: #8c9aab;
	display: block;
	margin-bottom: 6rpx;
	font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

.info-value {
	font-size: 28rpx;
	color: #3c4a5a;
	font-weight: 500;
	display: block;
	font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

/* 重新登录按钮 */
.refresh-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48rpx;
	height: 48rpx;
	background-color: rgba(41, 121, 255, 0.08);
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.3s ease;
}

.refresh-btn:active {
	background-color: rgba(41, 121, 255, 0.15);
	transform: scale(0.95);
}
</style> 